<template>
	<view class="my_collection">
		<u-tabs :list="tabsList" @click="tabClick" keyName="text" lineColor="#FF943C" :activeStyle="{
            color: '#FF943C',
        }" :inactiveStyle="{
            color: '#000000',
			fontSize:'14px'
        }" :scrollable="tabsList?.length > 5?true:false" v-if="tabsList?.length >1"></u-tabs>
		<view style="padding-bottom: 20rpx;">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" refresher-enabled="true"
				:refresher-triggered="triggered" @refresherrefresh="onRefresh" :refresher-threshold="50"
				@scrolltolower="scrolltolower" :style="{height:tabsList?.length > 1?'calc(100vh - 44px)':'100vh'}">
				<template v-if="dataSouse.length">
					<template v-if="params?.collectType === '1'">
						<view class="activity_cards" v-for="(item,index) in dataSouse" :key="item?.id">
							<view class="activity_cards_img" @click.stop="handleDetails(item)">
								<image :src="item?.cover"></image>
								<view class="cactivity_cards_img_item" v-if="item?.activityStatus === '1'">
									{{item?.activityStatusName}}
								</view>
							</view>
							<view class="activity_cards_bottom">
								<view>
									<view class="activity_cards_title">{{item?.activityName}}</view>
									<view class="activity_cards_tag" v-if="item?.lable">
										<text v-for="tag in item?.lable?.split(',')" :key="tag">#{{tag}}</text>
									</view>
									<view class="activity_cards_btm">
										<view class="activity_cards_subtitle">
											<image src="http://qianxueapplet.suoeryun.com/age-appropriate.png">
											</image>
											<template
												v-if="item?.fitAgeMin === '不限' && item?.fitAgeMax === '不限'">{{item?.fitAgeMax}}</template>
											<template
												v-else>{{item?.fitAgeMin === '不限'?item?.fitAgeMin :`${item?.fitAgeMin}岁`}}-{{item?.fitAgeMax === '不限'?item?.fitAgeMax :`${item?.fitAgeMax}岁`}}</template>
										</view>
										<image src="http://qianxueapplet.suoeryun.com/collectSelected.png"
											v-if="item?.isCollect" @click="handleCollect(item,index)"></image>
										<image src="http://qianxueapplet.suoeryun.com/collect.png" v-else></image>
									</view>
								</view>
							</view>
						</view>
					</template>
					<template v-else>
						<view class="goods_cards" v-for="(item,index) in dataSouse" :key="item?.id"
							@click.stop="handleClickGoods(item)">
							<image class="goods_cards_left" :src="item?.goodsCover" mode="aspectFill"></image>
							<view class="goods_cards_right">
								<view class="goods_cards_right_top">
									<view class="goods_cards_right_top_title">{{item?.goodsName}}</view>
									<text class="goods_cards_right_top_off"
										v-if="item?.shelvesState === '2'">商品已下架</text>
								</view>
								<view class="goods_cards_right_bottom">
									<view class="goods_price16"><text>￥</text>{{item?.originalPrice}}</view>
									<image src="http://qianxueapplet.suoeryun.com/collectSelected.png"
										v-if="item?.isCollect" @click.stop="handleGoodsCollect(item,index)"></image>
									<image src="http://qianxueapplet.suoeryun.com/collect.png" v-else></image>
								</view>
							</view>
						</view>
					</template>
					<u-loadmore :status="status" @loadmore="scrolltolower" v-if="status !== 'nomore'"></u-loadmore>
				</template>
				<u-empty v-else marginTop="100" text="暂无收藏" icon="http://qianxueapplet.suoeryun.com/sc.png"></u-empty>
			</scroll-view>
		</view>
	</view>
	<!-- 下架提示 -->
	<u-notify ref="uNotifyRef"></u-notify>
</template>

<script lang="ts" setup>
	import { getDictItemsByCode } from '@/config/sys.api';
	import { queryByType } from '@/config/mine.api';
	import { qxCommentCollectEdit } from '@/config/index.api';
	import { onMounted, ref, unref, reactive } from 'vue';
	import uNotify from '@/uni_modules/uview-plus/components/u-notify/u-notify.vue';

	const tabsList = ref([]);
	const dataSouse = ref([]);
	const pagination = reactive({ pageNo: 1, total: 0, pageSize: 10 });
	const triggered = ref(false);
	const scrollTop = ref(0);
	const status = ref('loadmore');
	const params = ref({ collectType: '' });
	const uNotifyRef = ref();

	onMounted(async () => {
		const res = await getDictItemsByCode({ dictCode: 'collect_type' });
		tabsList.value = res;
		console.log(res, 'res', res[0]['value']);
		if (res?.length > 0) {
			params.value.collectType = res[0]['value'];
			pagination.pageNo = 1;
			loadData();
		}
	})

	/**
	 * 切换页签
	 */
	function tabClick(item) {
		params.value.collectType = item['value'];
		pagination.pageNo = 1;
		loadData();
	}

	/**
	 * 加载数据
	 */
	async function loadData() {
		if (pagination.pageNo === 1) {
			dataSouse.value = [];
		}
		status.value = 'loading';
		const res = await queryByType({ ...pagination, ...unref(params) });
		console.log(res, 'ers');
		triggered.value = false;
		pagination.total = res?.list?.total;
		dataSouse.value?.push(...res?.list?.records);
		if (unref(dataSouse)?.length < pagination.total) {
			status.value = 'loadmore';
		} else {
			status.value = 'nomore';
		}
	}

	/**
	 * 滚动到底部操作
	 */
	function scrolltolower() {
		if (unref(dataSouse)?.length < pagination.total && (unref(dataSouse)?.length / pagination.pageSize == pagination.pageNo)) {
			pagination.pageNo++;
			loadData();
		}
	}

	/**
	 * 自定义下拉刷新被触发
	 */
	function onRefresh() {
		triggered.value = true;
		pagination.pageNo = 1;
		loadData();
	}

	/**
	 * 查看详情
	 */
	async function handleDetails(item) {
		uni.$u.route('/pages/index/acitvityDetails', {
			id: item?.id
		});
	}

	/**
	 * 取消收藏
	 */
	function handleCollect(item, index) {
		uni.showModal({
			content: '确认要从收藏中移出该活动吗？',
			confirmColor: '#FF943C',
			success: function (res) {
				if (res.confirm) {
					uni.$u.throttle(async function () {
						await qxCommentCollectEdit({ collectType: '1', collectId: item?.id, isCollect: item?.isCollect });
						dataSouse.value?.splice(index, 1);
						pagination.total = pagination.total - 1;
					}, 1000)
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		})
	}

	/**
	 * 好物-收藏
	 */
	function handleGoodsCollect(item, index) {
		uni.showModal({
			content: '确认要从收藏中移出该商品吗？',
			confirmColor: '#FF943C',
			success: function (res) {
				if (res.confirm) {
					uni.$u.throttle(async function () {
						await qxCommentCollectEdit({ collectType: '2', collectId: item?.id, isCollect: item?.isCollect });
						dataSouse.value?.splice(index, 1);
						pagination.total = pagination.total - 1;
					}, 1000)
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		})
	}

	/**
	 * 点击跳转好物详情
	 */
	function handleClickGoods(item) {
		if (item?.shelvesState === '2') {
			// uNotifyRef.value.show({
			// 	type: 'primary',
			// 	color: '#000',
			// 	bgColor: '#F2F3FF',
			// 	message: `${item?.goodsName}已下架，请从好物中浏览其他商品`,
			// 	duration: 1000 * 3,
			// 	fontSize: 14,
			// 	safeAreaInsetTop: true
			// });
			uni.showToast({
				icon: 'none',
				title: '该商品已下架，请从好物中浏览其他商品'
			})
		} else {
			uni.$u.route('/pages/goodStuff/goodDetails', {
				id: item?.id
			});
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-tabs {
		background-color: #ffffff;
	}

	// 活动
	.activity_cards {
		margin: 32rpx 24rpx 0 24rpx;
		border: 24rpx;
		background-color: #ffffff;
		border-radius: 24rpx;

		.activity_cards_img {
			position: relative;

			&>image {
				width: 100%;
				height: 380rpx;
				border-radius: 24rpx 24rpx 0 0;
			}

			.cactivity_cards_img_item {
				display: flex;
				align-items: center;
				position: absolute;
				bottom: 5px;
				height: 56rpx;
				background-color: #00000066;
				width: 95%;
				padding: 6rpx 20rpx;
				color: #ffffff;
				font-size: 30rpx;

				.time__item {
					width: 48rpx;
					height: 48rpx;
					background-color: #FF943C;
					padding: 8rpx;
					margin: 0 10rpx;
				}
			}

			.cactivity_cards_img_status {
				position: absolute;
				right: 0;
				width: 170rpx;
				height: 170rpx;
				border-radius: 0;
			}
		}

		.activity_cards_bottom {
			padding: 20rpx;

			.activity_cards_title {
				margin-bottom: 12rpx;
				font-size: 36rpx;
				font-weight: 600;
			}

			.activity_cards_tag {
				margin: 12rpx 0 0 0;

				text {
					border-radius: 192rpx;
					background: #FCF2EE;
					padding: 6rpx 18rpx;
					display: inline-block;
					font-size: 26rpx;
					font-weight: 550;
					color: #BC6C60;
					margin-right: 20rpx;
					margin-bottom: 12rpx;
					// margin-top: 14rpx;
				}
			}

			.activity_cards_btm {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.activity_cards_subtitle {
					font-size: 28rpx;
					font-weight: 600;

					image {
						width: 36rpx;
						height: 36rpx;
						margin-right: 10rpx;
						vertical-align: text-bottom;
					}
				}

				&>image {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
	}

	// 好物
	.goods_cards {
		margin: 32rpx 24rpx 0 24rpx;
		padding: 20rpx;
		background-color: #ffffff;
		border-radius: 12rpx;
		display: flex;

		.goods_cards_left {
			width: 216rpx;
			height: 216rpx;
			margin-right: 20rpx;
		}

		.goods_cards_right {
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			flex: 1;

			.goods_cards_right_top {
				.goods_cards_right_top_title {
					font-size: 32rpx;
					font-weight: 500;
				}

				.goods_cards_right_top_off {
					display: inline-block;
					padding: 4rpx 24rpx;
					background-color: #E4E4E4;
					color: #7C7C7C;
					font-size: 24rpx;
					margin-top: 24rpx;
					border-radius: 162rpx;
				}
			}

			.goods_cards_right_bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;

				image {
					width: 44rpx;
					height: 44rpx;
				}
			}
		}
	}
</style>